<template>
    <a-form :color="'primary'" :labelAlign="'right'" ref="form">
        <a-form-item :label="form.img.label" class="">
            <a-input-image-multi
                v-model:value="form.img.value"
                :rules="form.img.rules"
                :uploadFunc="uploadFunc"
                :getSrcFunc="getSrcFunc"
            ></a-input-image-multi>
        </a-form-item>
        <div class="c-m-t-xl">
            <a-button
                @click="loading = save()"
                :color="'primary'"
                :loading="loading"
                >保存</a-button
            >
        </div>
    </a-form>
</template>

<style lang="scss" scoped>
.a {
    width: 500px;
    max-height: 200px;
    overflow: auto;
}
</style>

<script>
import utils from '../common/utils'
export default {
    hidden: true,
    data() {
        return {
            loading: false,
            form: {
                img: {
                    label: '图片',
                    value: ['32ad255a-8065-4763-a329-bb440859c2a9.jpg'],
                    rules: [
                        { name: 'minLength', value: 1 },
                    ],
                },
            },
            fakeImgs: [
                '32ad255a-8065-4763-a329-bb440859c2a9.jpg',
                '58c38d00-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58d56750-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58ac8290-54b0-11eb-8b12-0b23616aea8a.jpg',
            ],
            fakeImgIndex: 0
        }
    },
    methods: {
        async uploadFunc(file) {
            await utils.sleep(1000)
            this.fakeImgIndex = (this.fakeImgIndex + 1) % 4
            return this.fakeImgs[this.fakeImgIndex]
        },
        getSrcFunc(id) {
            return `http://snacksmart-dev.oss-accelerate.aliyuncs.com/${id}`
        },
        async save() {
            let valid = await this.$refs.form.isValid()
            if (!valid) {
                return
            }
            console.log('提交成功')
        },
    }
}
</script>